<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式的绑定</title>
    <script src="../js/vue.js"></script>
    <style>
        .basic{
            width: 200px;
            height: 200px;
            border: 2px solid red;
            transition: all 1s;
        }
        .radius{
            border-radius: 5px;
        }
        .big{
            width: 400px;
            height: 400px;
        }
        .small{
            width: 100px;
            height: 100px;
        }
        .color{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <!-- 
        总结：
            1:一般指定动态的类名 用v-bind:class = value
            value 可以是字符串，可以是数组，可以是对象，对象值为boolean true用 false 不用
            2:style 样式 语法:style
                要用驼峰命名法 值是一个对象 也可以是一个array 里面包含多个对象
     -->
    <div id="root">
        <!-- 第一种：字符串写法，样式类名不确定，需要动态指定 -->
        <div class="basic" :class="className" @click="changeClassName"> liweihua </div>

         <!-- 第二种：array写法，要绑定的样式类名个数不确定 类名也不确定 -->
         <div class="basic" :class="classArray" @click="changeClassArray"> liweihua </div>

         <!-- 第三种：对象写法，要绑定的样式类名个数确定 类名也确定，但要动态决定用不用 -->
         <div class="basic" :class="classObj" @click="changeClassObj"> liweihua </div>
        <!-- style -->
        <!-- <div class="basic" style="font-size: 40px;"> style</div> -->
        <!-- 要用驼峰命名法 值是一个对象 也可以是一个array 里面包含多个对象 -->
        <div class="basic" :style="{fontSize:40 + 'px'}"> style</div>
        <div class="basic" :style="[{fontSize:40 + 'px'},{backgroundColor:'red'}]"> style</div>
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示。
    //创建Vue
    const vm = new Vue({
        el:'#root', 
        data:{
            className:'radius',
            classArray:['big','radius','color'],
            classObj:{
                big:false,
                radius:false,
                color:false
            }
        },
        methods:{
            changeClassName(){
                this.className = this.className === 'radius' ? 'big' : 'radius'
            },
            changeClassArray(){
                //shift 删除首位
                //this.classArray.shift()
                //shift 删除尾部位
                this.classArray.pop()
                //push() 尾部添加 unshift()
            },
            changeClassObj(){
                Object.keys( this.classObj ).forEach((key)=>{
                    this.classObj[key] = !this.classObj[key]
                })
            }
        }
    })

</script>
</html>